<!-- Copyright 2020 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_card_radio_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
<link rel="import" href="chrome://resources/html/action_link.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">

<link rel="import" href="../../components/hd_iron_icon.html">
<link rel="import" href="../../components/display_manager_types.html">
<link rel="import" href="../../components/oobe_icons.html">
<link rel="import" href="../../components/behaviors/login_screen_behavior.html">
<link rel="import" href="../../components/behaviors/multi_step_behavior.html">
<link rel="import" href="../../components/behaviors/oobe_i18n_behavior.html">
<link rel="import" href="../../components/buttons/oobe_back_button.html">
<link rel="import" href="../../components/buttons/oobe_next_button.html">
<link rel="import" href="../../components/common_styles/common_styles.html">
<link rel="import" href="../../components/common_styles/cr_card_radio_group_styles.html">
<link rel="import" href="../../components/common_styles/oobe_dialog_host_styles.html">
<link rel="import" href="../../components/dialogs/oobe_adaptive_dialog.html">
<link rel="import" href="../../components/dialogs/oobe_modal_dialog.html">


<dom-module id="user-creation-element">
  <template>
    <style include="oobe-dialog-host-styles cr-card-radio-group-styles">
      .help-text {
        color: var(--oobe-subheader-text-color);
        margin-top: 16px;
      }
    </style>
    <oobe-adaptive-dialog id="userCreationDialog" for-step="create"
        role="presentation">
      <iron-icon slot="icon" icon="oobe-32:googleg"></iron-icon>
      <h1 slot="title">
        [[i18nDynamic(locale, titleKey_)]]
      </h1>
      <div slot="subtitle">
        [[i18nDynamic(locale, subtitleKey_)]]
      </div>
      <div slot="content" class="layout vertical landscape-vertical-centered">
        <cr-radio-group id="userType" selected="{{selectedUserType}}">
          <cr-card-radio-button id="selfButton" class="flex" name="self">
            <div class="card-container">
              <hd-iron-icon class="card-icon" icon1x="oobe-48:avatar"
                  icon2x="oobe-96:avatar">
              </hd-iron-icon>
              <div class="card-content">
                <div class="card-label">
                  [[i18nDynamic(locale, 'createForSelfLabel')]]
                </div>
                <div class="card-text">
                  [[i18nDynamic(locale, 'createForSelfDescription')]]
                </div>
              </div>
            </div>
          </cr-card-radio-button>
          <cr-card-radio-button id="childButton" class="flex" name="child">
            <div class="card-container">
              <hd-iron-icon class="card-icon" icon1x="oobe-48:child-user"
                icon2x="oobe-96:child-user">
              </hd-iron-icon>
              <div class="card-content">
                <div class="card-label">
                  [[i18nDynamic(locale, 'createForChildLabel')]]
                </div>
                <div class="card-text">
                  [[i18nDynamic(locale, 'createForChildDescription')]]
                </div>
              </div>
            </div>
          </cr-card-radio-button>
        </cr-radio-group>
        </div>
      </div>
      <div slot="back-navigation">
        <oobe-back-button id="backButton" on-click="onBackClicked_"
            hidden="[[!isBackButtonVisible_]]">
        </oobe-back-button>
      </div>
      <div slot="bottom-buttons">
        <oobe-next-button id="nextButton" class="focus-on-show"
            on-click="onNextClicked_">
        </oobe-next-button>
      </div>
    </oobe-adaptive-dialog>
    <oobe-adaptive-dialog id="childSignInDialog" role="dialog" for-step="child"
        aria-label$="[[i18nDynamic(locale, 'childSignInTitle')]]">
      <iron-icon slot="icon" icon="oobe-32:family"></iron-icon>
      <h1 slot="title">
        [[i18nDynamic(locale, 'childSignInTitle')]]
      </h1>
      <div slot="subtitle">
        [[i18nDynamic(locale, 'childSignInSubtitle')]]
        <a id="learnMoreLink" class="oobe-local-link"
            on-click="onLearnMoreClicked_" is="action-link">
          [[i18nDynamic(locale, 'childSignInLearnMore')]]
        </a>
      </div>
      <div slot="content" class="layout vertical landscape-vertical-centered">
        <cr-radio-group id="childSignInMethod"
            selected="{{selectedSignInMethod}}">
          <cr-card-radio-button id="childCreateButton" name="create"
              class="flex focus-on-show">
            <div class="card-container">
              <hd-iron-icon class="card-icon" icon1x="oobe-48:person-add"
                  icon2x="oobe-96:person-add">
              </hd-iron-icon>
              <div class="card-content card-label">
                [[i18nDynamic(locale, 'createAccountForChildLabel')]]
              </div>
            </div>
          </cr-card-radio-button>
          <cr-card-radio-button id="childSignInButton" name="signin"
              class="flex">
            <div class="card-container">
              <hd-iron-icon class="card-icon" icon1x="oobe-48:supervised-user"
                  icon2x="oobe-96:supervised-user">
              </hd-iron-icon>
              <div class="card-content card-label">
                [[i18nDynamic(locale, 'signInForChildLabel')]]
              </div>
            </div>
          </cr-card-radio-button>
        </cr-radio-group>
        <div class="help-text">
          [[i18nDynamic(locale, 'childSignInParentNotificationText')]]
        </div>
      </div>
      <div slot="back-navigation">
        <oobe-back-button id="childBackButton" on-click="onBackClicked_">
        </oobe-back-button>
      </div>
      <div slot="bottom-buttons">
        <oobe-next-button id="childNextButton" on-click="onNextClicked_"
            disabled="[[!selectedSignInMethod]]">
        </oobe-next-button>
      </div>
    </oobe-adaptive-dialog>
    <oobe-modal-dialog id="learnMoreDialog" on-close="focusLearnMoreLink_"
        title-key="childSignInLearnMoreDialogTitle">
      <div slot="content" class="card-text">
        [[i18nDynamic(locale, 'childSignInLearnMoreDialogText')]]
      </div>
    </oobe-modal-dialog>
  </template>
  <script src="user_creation.js"></script>
</dom-module>
